<script setup>
import { ref, watch } from 'vue';
import Content from '../../components/Content.vue';
import AsideRight from '../../components/AsideRight.vue';
import { useRoute } from 'vue-router';
const route = useRoute();
const title = ref(1);
const form = ref({});
const answer = ref({});
function titleFocus(type, info) {
    isShow.value = true;
    title.value = type;
    form.value = info;
}

function answerFocus(type, info, item) {
    isShow.value = true;
    title.value = type;
    form.value = info;
    answer.value = item;
}


const isShow = ref(false);


watch(() => route.path, (val) => {
    if (val) {
        isShow.value = false;
    }
}, {
    immediate: true,
    deep: true
})

</script>

<template>
    <section class="title-container">
        <Content @onTitleFocus="titleFocus" @onAnswerFocus="answerFocus" />
        <AsideRight :title="title" :form="form" :answer="answer" v-if="isShow" />
    </section>
</template>

<style scoped lang="scss">
.title-container {
    display: flex;
    justify-content: space-between;
    height: 100%;
}
</style>
